<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">    
    <meta name="viewport" content="width=device-width,initial-scale=1.0">		
	<title>家信-拉近亲人间的距离</title>
	<style>
        html,body,article,footer,header,p,img{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline}
        article,footer,header{display:block}
        html,body{height: 100%;-webkit-touch-callout: none;background:#eee8dd url(img/bg.png) 0 0 repeat;}
        /*base*/
        footer{position: fixed;bottom: 0;left: 0;width: 100%;height: 4.29em;background:#44373b url(img/footer.png) 0.71em 0.71em no-repeat;background-size:auto 2.86em;line-height: 4.29em;font-size: 0.88em;color: #b4e0ff;text-indent: 4.29em;box-shadow: inset 0 1px 0.36em #35262c}
        footer a{position: absolute;right: 0.71em;top: 50%;margin-top: -0.93em;height: 1.86em;line-height: 1.86em;padding: 0 0.86em;background-color: #78bf69;border-bottom: 1px solid #5f9453;border-radius: 0.36em;color: #fff;text-decoration: none;text-indent: 0}
        .banner{display: block;width: 72%;margin:0 auto;padding-bottom: 4.38em;/*-webkit-user-select: none;*/}
        .letter{width: 18.71em;height: 7.5em;margin:0.36em auto 0;padding: 1.64em 1.43em;font-size: 0.88em;background:  url(img/letter.png) 0 0 no-repeat;background-size:100% auto ;line-height: 1.71em;color: #000;}
        .title{}
        .comtent{text-indent: 2em}       
    </style>
</head>
<body>
  <div class="letter">
    <p class="title">AAA您好：</p>
    <p class="comtent">BBB在家信里请求添加您为亲人，他/她标注你们的关系为：您是他/她的XXXXXXXXX</p>
  </div>
  <img src="img/banner.jpg" alt="我们需要一个地方,说出我们不善于表达的爱" class="banner">
  <footer>家信 拉近亲人间的距离 <a href="">点击下载</a></footer>

</body>
</html>